<script setup lang="ts">
import { ref, toRefs, computed, toRef } from "vue";
import { onShow, onHide, onLoad } from "@dcloudio/uni-app";
import _ from "lodash";
import assets from "@/utils/assets";

let props = defineProps(["startTime", "endTime", "label"]);
let emit = defineEmits(["update:startTime", "update:endTime"]);
let { label } = toRefs(props);

let startTime = toRef(props, "startTime");
let endTime = toRef(props, "endTime");

let handleStartTimeChange = (evt: any) => {
  let val = _.get(evt, "detail.value");
  emit("update:startTime", val);
};

let handleEndTimeChange = (evt: any) => {
  let val = _.get(evt, "detail.value");
  emit("update:endTime", val);
};
</script>

<template>
  <div class="form-item">
    <span class="name">{{ label }}</span>
    <picker
      mode="time"
      class="picker-box"
      :value="startTime"
      start="00:00"
      end="23:59"
      @change="handleStartTimeChange"
    >
      <div class="picker-content">
        <view class="picker-name">{{ startTime }}</view>
      </div>
    </picker>
    <span class="gap">～</span>
    <picker
      mode="time"
      class="picker-box picker-box-2"
      :value="endTime"
      start="00:00"
      end="23:59"
      @change="handleEndTimeChange"
    >
      <div class="picker-content">
        <view class="picker-name">{{ endTime }}</view>
      </div>
    </picker>
  </div>
</template>

<style lang="less" scoped>
.form-item {
  padding: 0 34rpx;
  padding-right: 0rpx;
  height: 112rpx;
  border-bottom: 1rpx solid #ededed;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.form-item:last-child {
  border-bottom: none;
}
.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
  margin-right: 8rpx;
  white-space: nowrap;
}
.picker-box {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-box-2 {
  justify-content: center;
}
.gap {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #333333;
}
.picker-content {
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.picker-name {
  height: 80rpx;
  line-height: 80rpx;
  flex: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #333333;
  margin-right: 8rpx;
}
.picker-name-empty {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #999999;
  margin-right: 8rpx;
}
.arrow_right {
  width: 40rpx;
  height: 40rpx;
}
</style>
